<template>
  <div class="vh100">
    <title-panel title="登录" :height="32" />
    <window-header :show-set-top="false" :show-max="false" />
    <div class="app-container">
      <div class="login-box">
        <n-form ref="formRef" :model="modelRef" :rules="rules" label-placement="left" :label-width="60">
          <n-form-item path="account" label="账号">
            <n-input v-model:value="modelRef.account" @keydown.enter.prevent />
          </n-form-item>
          <n-form-item path="password" label="密码">
            <n-input
              v-model:value="modelRef.password"
              type="password"
              @keydown.enter.prevent
            />
          </n-form-item>
          <n-row :gutter="[0, 24]">
            <n-col :span="24">
              <div style="text-align: center;">
                <n-button
                  type="primary"
                  style="width: 200px;"
                  @click="handleValidateButtonClick"
                >登录
                </n-button>
              </div>
            </n-col>
          </n-row>
        </n-form>

        <n-flex justify="center" style="margin-top: 16px;">
          <n-button text @click="handleScan">扫码登录</n-button>
          <n-button text @click="handleRegister">立即注册</n-button>
          <n-button text @click="handleForget">忘记密码</n-button>
        </n-flex>
        <n-flex justify="center" style="margin-top: 110px;">
          <n-button text @click="handleCode" text-color="#c71d23">Gitee源码地址</n-button>
          <n-button text @click="handleAuthor">@author：前端没钱</n-button>
        </n-flex>
      </div>
    </div>
  </div>
</template>

<script setup>
import { invoke } from "@tauri-apps/api/core";
import { openUrl } from "@tauri-apps/plugin-opener";
import { useMessage } from "naive-ui";
import { ref } from "vue";

import { useTray } from "@/hooks/useTray.js";
const { createTray } = useTray();

import { useCreateWindow } from "@/hooks/useCreateWindow.js";
const { destroyWindow, openWindow } = useCreateWindow();

const formRef = ref(null);
const message = useMessage();
const modelRef = ref({
  account: 'admin',
  password: 'admin123456',
});

const rules = {
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: ["input", "blur"]
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码"
    }
  ],
};

// 登录校验
function handleValidateButtonClick(e) {
  e.preventDefault();
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      message.success("登录成功");

      // 1.创建托盘
      await createTray()

      // 2.设置登录状态
      await invoke('set_login_status', {
        status: true
      })

      // 3.然后创建主窗口
      await createMainWindow()

      // 4.销毁登录窗口
      await destroyWindow('login')
    } else {
      console.log(errors);
      message.error("账号或密码错误");
    }
  });
}

/**
 * 创建主聊天窗口
 * 这里传的url带参数，用于判断是否登录成功，否则其他方式有问题，如下：
 * 1.如果用store，跨窗口的状态无法同步
 * 2.如果用localStorage，程序退出后状态仍为登录状态
 * */
async function createMainWindow() {
  await openWindow('chat', {
    label: 'chat',
    title: '微信',
    width: 728,
    height: 650,
    resizable: true,
    decorations: false,
    transparent: false,
    minWidth: 728,
    minHeight: 650
  })
}

const handleScan = () => {
  message.warning('扫码登录个毛线，我还没写这个功能呢！');
};

const handleRegister = () => {
  message.warning('注册个毛线，我还没写这个功能呢！');
};

const handleForget = () => {
  message.warning('忘记密码个毛线，忘了就忘了吧！');
};

const handleCode = () => {
  openUrl('https://gitee.com/ruirui-study/tauri-wechat-naive-ui-app')
};

const handleAuthor = () => {
  message.success('感谢客官点我~');
};
</script>

<style scoped>
.login-box {
  width: 360px;
  margin: 0 auto;
}
</style>
